<template>
  <div class="ry_dialog__wrapper" v-show="visible">
    <div ref="dialog"
         class="ry_dialog ld"
         style="animation-duration:0.2s"
         :style="{width,height,top,left}"
         v-draggable
    >
      <div class="ry_dialog_header ry_draggable">
        <slot name="title">
          <span class="ry_dialog_title">{{ title }}</span>
        </slot>
        <button
          type="button"
          aria-label="Close"
          @click="handleClose">
          <i class="iconfont iconclose"></i>
        </button>
      </div>
      <div class="ry_dialog_body">
        <slot></slot>
      </div>
      <div class="ry_dialog_footer" v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DraggableDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    width: {
      type: String,
      default: '60vw'
    },
    height: {
      type: String,
      default: '50vh'
    },
    top: {
      type: String,
      default: '50%'
    },
    left: {
      type: String,
      default: '50%'
    },
    animateName: {
      type: String,
      default: 'float-btt-in'
    }
  },
  watch: {},
  mounted () {
    this.$refs.dialog.classList.add('ld-' + this.animateName)
  },
  methods: {
    handleClose () {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style>
.ry_dialog__wrapper {
  position: fixed;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
}

.ry_dialog {
  position: absolute;
  background-color: #ffffff;
  border-radius: 0.4vw;
  transform: translate(-50%, -50%);
  box-shadow: 2px 2px 20px 0 rgba(202, 218, 251, 0.4);
  overflow: hidden;
}

.ry_dialog_header {
  cursor: url("/img/drag.cur"), auto;
  /*cursor: move;*/
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 5vh;
  min-height: 5vh;
  padding-left: 1vw;
  padding-right: 1vw;
  font-weight: 600;
  font-size: 1.8vh;
  letter-spacing: 2px;
  color: white;
  background-color: #3165C8;
}

.ry_dialog_header > button {
  margin-left: auto;
  border: none;
  outline: none;
}

.ry_dialog_body {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ry_dialog_footer {
  position: relative;
  width: 100%;
  height: 5vh;
}
</style>
